<template>
	<view>
		<!--part01-->
		<uni-nav-bar color="#333333" background-color="#FFFFFF" :fixed="true" right-text="搜索" @click-right="onsearch">
			<view class="input-view">
				<uni-icon type="search" size="22" color="#666666"></uni-icon>
				<input confirm-type="search" @confirm="confirm" class="input" type="text" placeholder="寻找生鲜、食品" v-model="inputsearch"
				v-on:input="inputFuc" />
				
				<uni-icon type="clear" size="16" color="#666666" :visibility="onshow" @click="clearobj"></uni-icon>
			</view>
		</uni-nav-bar>
		<!--part01-->
		<!--part02-->
		<view class="uni-flex uni-column" v-show="ishot">
			<view class="flex-item " style="width:100%;padding-left: 50upx;">热门搜索</view>
			<view class="flex-item " style="width:100%;">
				<view class="uni-flex uni-row hot">
					<view class="flex-item" v-for="(item,index) in hotobj.hotList" :key="index" v-if="hotobj.hotList!=''" @tap="toinput(item.keywords)">{{item.keywords}}</view>
				</view>
			</view>
		</view>
		<!--part02-->
		<!--part03-->
		<view class="uni-flex uni-column searchlist" v-show="searchlist">
			<view class="flex-item searchlist"  v-for="(item,index) in searchobj" :key="index" v-if="searchobj!=''" @tap="toinput(item.productName)">{{item.productName}}</view>
		</view>
		<!--part03-->
		<!--part04-->
		<block v-for="(proitem,index2) in productobj" :key="index2" v-show="productlist">
			<view class="uni-flex uni-row productlist"  style="border-bottom: 1px solid #efefef;" v-show="productlist" >
				<view class="flex-item uni-left uni-media-list-logo" style="height:auto;margin-right: 0;" @click="goDetail(proitem.productId,proitem.wholesale)">
					<uni-lazy-image :realSrc="proitem.thumbnailUrl" :placeholdSrc="placeholdSrc" class="searchicon" :mode="mode" ></uni-lazy-image>				</view>
				<view class="flex-item uni-right">
					<view class="uni-flex uni-column" style="width:100%;">
						<view class=" flex-item-V title" style="padding:30upx 0 0 30upx;" @click="goDetail(proitem.productId,proitem.wholesale)">{{proitem.productName}}</view>
						<view class=" flex-item-V hottag" style="color: white;"  @click="goDetail(proitem.productId,proitem.wholesale)">
							<view class="uni-flex uni-row" v-if="proitem.tags!=undefined">
								<view :class="['flex-item itemword']+tagindex" v-for="(tagvalue,tagindex) in proitem.tags" :key="tagindex">{{tagvalue}}</view>
							</view>
							<view class=" flex-item-V hottag" style="color: white;background: #fff;" v-else @click="goDetail(proitem.productId)">
								@
							</view>
						</view>
						<view class=" flex-item-V stock" @click="goDetail(proitem.productId,proitem.wholesale)">
							剩余：{{proitem.stock}}件
						</view>
						<view class=" flex-item-V bot" style="width:100%;">
							<view class="uni-flex uni-row" style="width:100%;">
								<view class="flex-item " style="width:60%;padding:0upx;justify-content:flex-start;color:red;font-size: 16px;text-indent:0;" @click="goDetail(proitem.productId,proitem.wholesale)">
									<text>¥{{proitem.lowestSalePrice}} <text space="space" style="margin-left:20upx;color:#999999;font-size: 12px;text-decoration:line-through">¥{{proitem.marketPrice}}</text></text>
								</view>
								<view class="flex-item " style="width:30%;justify-content:flex-end;display: inline-flex;">
									<image src="/static/gouwuche1.png" style="width:50upx;height:50upx;z-index: 1;" mode="widthFix"
									 @tap="addShopCart(proitem)"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<block  v-if="shownot">
			<view style="height:120upx;margin: 0 auto;position: absolute;left: 0;right: 0;text-align: center;">
				<image class="image" lazy-load="true" src="https://www.dalinicegroup.com/w/images/defaultpage_search.png" style="width:200upx;height:200upx;"></image>
				<view>
					暂无数据
				</view>
			</view>
		</block>
		<!--part04-->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import uniIcon from '@/components/uni-icon/uni-icon.vue'
	import UniLazyImage from '@/components/uni-lazy-image/uni-lazy-image';
	export default {
		components: {
			uniNavBar,
			uniIcon,
			UniLazyImage
		},
		data() {
			return {
				city: "大理",
				onshow: 'hidden',
				inputsearch: "",
				ishot: true,
				searchlist: false,
				productlist: false,
				shownot:false,
				hotobj: [],
				searchobj: [],
				productobj: [],
				pageIndex:1,
				pageSize:20,
				mode: 'widthFix',
				placeholdSrc: '/static/home_image_hold.png',
			}
		},
		onLoad(opt) {
			uni.setNavigationBarTitle({
				title: '查询'
			});
			let that = this;
			this.loadData();
		},
		methods: {
			async loadData(nid) {
				let that = this
				let url = this.$store.state.base_url
				let ctx = this.$store
				let authKey = this.userinfo!=''?this.userinfo.authKey:'';
				this.$store.commit("switch_loading", "1")
				uni.request({
					url: url,
					method: 'POST',
					data: {
						"id": 2,
						"method": "product_searchKeyword",
						"params": {
							"authKey": authKey
						}
					},
					success(res) {
						//console.log(JSON.stringify(res.data.result.data))
						if (res.data.result.status == 'success') {
							that.hotobj = res.data.result.data;
						} else {
							uni.showToast({
								title: res.data.result.message,
								duration: 3000,
								mask: true,
								icon: 'none'
							})
						}

					},
					fail() {
						uni.showToast({
							title: "网络不可用，请稍后在试。",
							duration: 3000,
							mask: true,
							icon: 'none'
						})
					},
					complete() {
						ctx.commit("switch_loading", "0")
					}
				})
			},
			onsearch: function(e) {
				let that = this
				let url = this.$store.state.shopping_url
				let val = this.inputsearch.replace(/\s*/g, "");
				let authKey = this.userinfo!=''?this.userinfo.authKey:'';
				if(val!=''){
					//检索
					uni.request({
						url: url,
						method: 'POST',
						data: {
							"id": 2,
							"method": "product_searchList",
							"params": {
								"keyWords": val,
								"pageIndex": that.pageIndex,
								"pageSize": that.pageSize,
								"authKey": authKey
							}
						},
						success(res) {
							try{
								//console.log(JSON.stringify(res.data.result.data))
								if (res.data.result.status == 'success') {
									if(res.data.result.data!=''){
										that.productobj = res.data.result.data;
										that.productlist = true;
										that.searchlist = false;
										that.ishot = false;
										that.shownot = false;
									}else{
										that.productlist = false;
										that.searchlist = false;
										that.ishot = true;
										that.shownot = true;
									}
									
								} else {
									uni.showToast({
										title: res.data.result.message,
										duration: 3000,
										mask: true,
										icon: 'none'
									})
								}
							}catch(e){
								//TODO handle the exception
							}
							
					
						},
						fail() {
							uni.showToast({
								title: "网络不可用，请稍后在试。",
								duration: 3000,
								mask: true,
								icon: 'none'
							})
						},
						complete() {
						}
					})
				}else{
					this.productlist = false;
					this.searchlist = false;
					this.ishot = true;
					uni.showToast({
						title: "请先输入要搜索的内容",
						duration: 3000,
						mask: true,
						icon: 'none'
					})
				}
			},
			confirm: function(e) {
				let that = this
				let url = this.$store.state.shopping_url
				let val = this.inputsearch.replace(/\s*/g, "");
				let authKey = this.userinfo!=''?this.userinfo.authKey:'';
				if(val!=''){
					//检索
					uni.request({
						url: url,
						method: 'POST',
						data: {
							"id": 2,
							"method": "product_searchList",
							"params": {
								"keyWords": val,
								"pageIndex": that.pageIndex,
								"pageSize": that.pageSize,
								"authKey": authKey
							}
						},
						success(res) {
							try{
								//console.log(JSON.stringify(res.data.result.data))
								if (res.data.result.status == 'success') {
									if(res.data.result.data!=''){
										that.productobj = res.data.result.data;
										that.productlist = true;
										that.searchlist = false;
										that.ishot = false;
										that.shownot = false;
									}else{
										that.productlist = false;
										that.searchlist = false;
										that.ishot = true;
										that.shownot = true;
									}
								} else {
									uni.showToast({
										title: res.data.result.message,
										duration: 3000,
										mask: true,
										icon: 'none'
									})
								}
							}catch(e){
								//TODO handle the exception
							}
							
					
						},
						fail() {
							uni.showToast({
								title: "网络不可用，请稍后在试。",
								duration: 3000,
								mask: true,
								icon: 'none'
							})
						},
						complete() {
						}
					})
				}else{
					this.productlist = false;
					this.searchlist = false;
					this.ishot = true;
					uni.showToast({
						title: "请先输入要搜索的内容",
						duration: 3000,
						mask: true,
						icon: 'none'
					})
				}
			},
			imageError: function(e) {
				console.error('image发生error事件，携带值为' + e.detail.errMsg)
			},
			mpGetUserInfo: function(result) {
				//console.log('mpGetUserInfo', result);
				if (result.detail.errMsg !== 'getUserInfo:ok') {
					uni.showModal({
						title: '获取用户信息失败',
						content: '错误原因' + result.detail.errMsg,
						showCancel: false
					});
					return;
				}
				this.loginobj();
				// 				console.log(JSON.stringify(result.detail.userInfo))
				// 				this.$store.commit("login","weixin",result.detail.userInfo);
				// 				this.userinfo = result.detail.userInfo;
				// 				this.userInfo = result.detail.userInfo;
			},

			inputFuc: function(e) {
				let that = this
				let url = this.$store.state.base_url
				let val = e.detail.value.replace(/\s*/g, "");
				let authKey = this.userinfo!=''?this.userinfo.authKey:'';
				//console.log("123"+val);
				if(val!=''){
					//检索
					uni.request({
						url: url,
						method: 'POST',
						data: {
							"id": 2,
							"method": "product_searchList",
							"params": {
								"keyWords": val,
								"pageIndex": that.pageIndex,
								"pageSize": that.pageSize,
								"authKey": authKey
							}
						},
						success(res) {
							//console.log(JSON.stringify(res.data.result.data))
							try{
								if (res.data.result.status == 'success') {
									if(res.data.result.data!=''){
										that.searchobj = res.data.result.data;
										that.searchlist = true;
										that.ishot = false;
										that.productlist = false;
										that.shownot = false;
										
									}else{
										that.productlist = false;
										that.searchlist = false;
										that.ishot = true;
										that.shownot = true;
										
									}
									
								} else {
									uni.showToast({
										title: res.data.result.message,
										duration: 3000,
										mask: true,
										icon: 'none'
									})
								}
							}catch(e){
								//TODO handle the exception
							}
							
							
					
						},
						fail() {
							uni.showToast({
								title: "网络不可用，请稍后在试。",
								duration: 3000,
								mask: true,
								icon: 'none'
							})
						},
						complete() {
						}
					})
				}else{
					this.productlist = false;
					this.searchlist = false;
					this.ishot = true;
				}
				
				if (e.detail.value.trim() != '') {
					this.onshow = 'visible';
				} else {
					this.onshow = 'hidden';
				}
			},
			clearobj: function(e) {
				setTimeout(()=>{
					this.inputsearch = '';
				},100)
				
				this.onshow = 'hidden';
				this.searchlist = false;
				this.ishot = true;
				this.productlist = false;
				this.shownot = false;
				//this.$forceUpdate();
			},
			toinput(value) {
				this.inputsearch = value;
				let that = this
				let url = this.$store.state.shopping_url
				let val = value.replace(/\s*/g, "");
				let authKey = this.userinfo!=''?this.userinfo.authKey:'';
				if(val!=''){
					//检索
					uni.request({
						url: url,
						method: 'POST',
						data: {
							"id": 2,
							"method": "product_searchList",
							"params": {
								"keyWords": val,
								"pageIndex": that.pageIndex,
								"pageSize": that.pageSize,
								"authKey": authKey
							}
						},
						success(res) {
							//console.log(JSON.stringify(res.data.result.data))
							try{
								if (res.data.result.status == 'success') {
									if(res.data.result.data!=''){
										that.productobj = res.data.result.data;
										that.productlist = true;
										that.searchlist = false;
										that.ishot = false;
										that.shownot = false;
									}else{
										that.productlist = false;
										that.searchlist = false;
										that.ishot = true;
										that.shownot = true;
									}
									
								} else {
									uni.showToast({
										title: res.data.result.message,
										duration: 3000,
										mask: true,
										icon: 'none'
									})
								}
							}catch(e){
								//TODO handle the exception
							}
							
					
						},
						fail() {
							uni.showToast({
								title: "网络不可用，请稍后在试。",
								duration: 3000,
								mask: true,
								icon: 'none'
							})
						},
						complete() {
						}
					})
				}else{
					this.productlist = false;
					this.searchlist = false;
					this.ishot = true;
				}
				
			},
			openProductDetail(itemid){
				uni.navigateTo({  
					url:'/pages/product/product?id='+itemid.productId
				})  
			},
			addShopCart(itemobj) {
				//加入购物车
				let that = this
				let url = this.$store.state.base_url
				let authKey = this.userinfo!=''?this.userinfo.authKey:'';
				if (!this.hasLogin) {
					url = '/pages/login/login';
					uni.navigateTo({
						url
					})
					return;
				}
				//跳转拼团页
				// console.log(itemobj)
				// return;
				if(itemobj.wholesale!=undefined){
					if(itemobj.wholesale){
						let navigateUrl = 'https://www.dalinicegroup.com/w/salespro/groupbuying/indexxcx.html';
						let url = '/pages/web-view/web-view-sq?url=' + navigateUrl;
						uni.navigateTo({
							url
						})
						return;
					}
				}
			
				uni.request({
					url: url,
					method: 'POST',
					data: {
						"id": 2,
						"method": "shoppingCart_append",
						"params": {
							"productId": itemobj.productId,
							"count": 1,
							"authKey": authKey
						}
					},
					success(res) {
						//console.log(JSON.stringify(res.data.result.data))
						if (res.data.result.status == 'success') {
							that.shopcartNum = res.data.result.data.totalNumbers
							//that.numberValue = res.data.result.data.currentNumbers
							if (res.data.result.data.total == 0) {
								that.addShopCart = 0;
								that.$store.commit('update_shopcarnum', 0)
							} else {
								that.numberValue = res.data.result.data.total
								that.$store.commit('update_shopcarnum', res.data.result.data.total)
							}
							uni.showToast({
								title: res.data.result.data.message,
								duration: 1000,
								mask: true,
								icon: 'success'
							})
							//res.data.result.data.forEach(item => item.productName = util.cutStr(item.productName, 30))
							//that.newsitems = that.randomfn(res.data.result.data);
						} else {
							uni.showToast({
								title: res.data.result.data.message,
								duration: 3000,
								mask: true,
								icon: 'none'
							})
						}
			
					},
					fail() {
						uni.showToast({
							title: "网络不可用，请稍后在试。",
							duration: 3000,
							mask: true,
							icon: 'none'
						})
					},
					complete() {}
				})
			},
			goDetail(id,str) {
				//console.log(str)
				if(str!=undefined){
					if(str){
						let navigateUrl = 'https://www.dalinicegroup.com/w/salespro/groupbuying/indexxcx.html';
						let url = '/pages/web-view/web-view-sq?url=' + navigateUrl;
						uni.navigateTo({
							url
						})
						return;
					}
				}
				uni.navigateTo({
					url: '/pages/product/product?id=' + id
				})
			}
		},
		watch: {
			inputsearch(newVal, oldVal) {
				if(newVal.replace(/\s*/g,"")==''){
					this.searchlist = false;
					this.ishot = true;
					this.productlist = false;
				}
				// if (+newVal.replace(/\s*/g,"") !== +oldVal.replace(/\s*/g,"")) {
				// 	console.log(newVal.replace(/\s*/g,""));
				// }
			}
		},
		computed: {
			...mapState(['hasLogin', 'userinfo'])
		}

	}
</script>

<style lang="scss">
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff
	}

	.uni-navbar__header-btns {
		width: 0;
	}

	view {
		font-size: 28upx;
		line-height: inherit
	}

	.example {
		padding: 0 30upx 30upx
	}

	.example-title {
		font-size: 32upx;
		line-height: 32upx;
		color: #777;
		margin: 40upx 25upx;
		position: relative
	}

	.example .example-title {
		margin: 40upx 0
	}

	.example-body {
		padding: 0 40upx
	}

	.uni-common-mt {
		color: #7a7e83;
		font-size: 28upx;
		padding: 30upx;
	}

	.title {
		font-size: 15px;
		line-height: 20px;
		color: #333333;
		padding: 15px;
	}

	.city {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-left: 8px;
		white-space: nowrap;
	}

	.input-view {
		width: 92%;
		display: flex;
		background-color: #e7e7e7;
		height: 30px;
		border-radius: 15px;
		padding: 0 4%;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: 30px;
	}

	.input-view .uni-icon {
		line-height: 30px !important;
	}

	.input-view .input {
		height: 30px;
		line-height: 30px;
		width: 94%;
		padding: 0 3%;
	}

	#clearicon {
		visibility: visible;
	}

	.uni-navbar--shadow {
		-webkit-box-shadow: 0 0px 0px #ccc;
		box-shadow: 0 0px 0px #ccc;
	}

	.uni-flex.uni-column {
		align-items: center;

		.flex-item {
			align-items: center;
			justify-content: flex-start;
			text-indent: 0em;
		}

		.hot {
			flex-wrap: wrap;
			padding-left: 20upx;

			.flex-item {
				text-indent: 0em;
				text-align: center;
				border: 1px solid rgb(231, 231, 231);
				background: rgb(231, 231, 231);
				color: #000;
				width: 90upx;
				height: 50upx;
				margin-bottom: 20upx;
				margin-right: 20upx;
				border-radius: 100upx;
				padding: 0;
				justify-content: center;
				align-items: center;
				align-content: center;
			}
		}
		.searchlist{
			width:100%;
			height:60upx;
			border-bottom: 1upx solid #f8f8f8;
			color:#999999;
			text-indent: 40upx;
		}
	}
	.productlist{
		display: flex;
		.uni-left{
			width:25%;
			display: inline-flex;
			justify-content: center;
			align-items: center;
		}
		.uni-right{
			width:73%;
			display: inline-flex;
			.stock{
				width:90%;
				justify-content:flex-end;
				height:57upx;
				display: inline-flex;
				color:red;
			}
			.title{
				width:100%;
			}
			.hottag{
				margin-top:8upx;
				height:40upx;
				width:90%;
			}
		}
		
	}
	.itemword0 {
		width: auto;
		height: 30rpx;
		background: #fff0f7;
		border-radius: 50rpx;
		color: white;
		font-size: 22rpx;
		line-height: 30rpx;
		margin-right: 10rpx;
		color: #fa98b1;
		text-indent: 0;
		padding: 0 5px 0 5px;
	}
	
	.itemword1 {
		width: auto;
		height: 30rpx;
		background: rgb(254, 239, 196);
		border-radius: 50rpx;
		color: white;
		font-size: 22rpx;
		line-height: 30rpx;
		margin-right: 10rpx;
		color: #fa98b1;
		text-indent: 0;
		padding: 0 5px 0 5px;
	}
	
	.itemword2 {
		width: auto;
		height: 30rpx;
		background: rgb(110, 213, 255);
		border-radius: 50rpx;
		color: white;
		font-size: 22rpx;
		line-height: 30rpx;
		margin-right: 10rpx;
		color: #fa98b1;
		text-indent: 0;
		padding: 0 5px 0 5px;
	}
	.searchicon{
		width: 140upx;
		height:140upx;
	}
</style>
